<template>
  <div>
       <hr>
      <h1>vue2写法</h1>
    <div>数字：{{count}}</div>
    <div>计算：{{countFive}}</div>
    <button @click="toAdd">加1</button>
    <hr>
    <h1>vue3写法</h1>
    <div>数字：{{total}}</div>
    <div>计算：{{totalFive}}</div>
    <button @click="toPlus">加1</button>
  </div>
</template>

<script >
// vue2是选项api  options api
// vue3框架 支持vue2的大部分语法(98%)
import {useRoute} from 'vue-router'
import {ref,computed} from 'vue'
  export default {
    // vue2-----------------
    data(){
      return {
        count:0
      }
    },
    methods:{
      toAdd(){
        this.count++
      }
    },
    computed:{
      countFive(){ //计算属性 让data数据乘5
        return this.count*5
      }
    },
    // vue2-------------结束

    // vue3开始 vue3的新选项setup 作为vue3组合（composition）Api的启动
     // setup函数中不能使用this关键字
      // setup函数需要返回值 返回组件需要的数据方法等内容
    setup(){ 
    
      // ref 常用于简单数据类型定义为响应式数据
      // 在在修改值，和获取值需要使用.value操作
      // 在js使用时候 需要加.value操作
      // 去页面渲染的时候无需加.value
        let route=useRoute();
        console.log(route.query,"--------")
        console.log(route.params,"--------")
      let total=ref(0)
      let myflag=ref(true)
      let myarr=ref(["吃饭","睡觉","打游戏"])
      //  事件函数

      let toPlus=()=>{ //让数据加1的函数
          // total.value=total.value+1
          total.value++
      }
      // 计算属性
      let totalFive=computed(()=>{
        return  total.value*5
      })
      // 返回组件需要的 数据，函数，计算属性等
      return {
          total,
          toPlus,
          totalFive
      }
      
    }

  }
</script>
